<template>
  <div class="whole wholeShowAll">
    <div class="crumbs">
      <div></div>
      <a-breadcrumb v-if="false">
        <a-breadcrumb-item v-for="(item, index) in $route.matched" :key="index">
          <span v-if="index + 1 < $route.matched.length">
            {{
              item.meta.title
            }}
          </span>
          <router-link
              v-if="index + 1 == $route.matched.length"
              :to="item.path"
          >{{ item.meta.title }}
          </router-link>
        </a-breadcrumb-item>
      </a-breadcrumb>
      <div class="returnPrevious" @click="returnToPrevious">
        <a-icon type="left"/>
        <span>返回</span>
      </div>
    </div>
    <div class="mainPart">
      <div class="mainPart_filter">
        <div class="mainPart_filter_searchBox">
          <a-form>
            <a-input class="centerInp" v-model="centerInp" placeholder="请输入患者姓名、患者ID"/>
            <div class="centerBut" @click="onSearch(centerInp)"></div>
          </a-form>
        </div>
        <div class="mainPart_filter_check">
          <a-checkbox-group @change="onChangeOption" v-model="checkBoxObj.checkedList">
            <a-checkbox
                v-for="(item, index) in checkBoxObj.children"
                :key="index"
                :value="item.val"
            >{{ item.label }}
            </a-checkbox>
          </a-checkbox-group>
        </div>
        <div class="mainPart_filter_time">
          <span class="one"></span>
          <span class="two"></span>
          <a-range-picker
              v-if="checkedListDisabled == 4"
              :value="showDateTime"
              @change="onChange"
              class="aRangePicker aRangePicker1"
          ></a-range-picker>
          <a-range-picker
              v-if="checkedListDisabled != 4"
              @change="onChange"
              class="aRangePicker"
              disabled
          ></a-range-picker>
          <span v-if="checkedListDisabled != 4" class="startTimeApply">
            {{
              startTimeApply
            }}
          </span>
          <span v-if="checkedListDisabled != 4" class="endTimeApply">
            {{
              endTimeApply
            }}
          </span>
        </div>
        <div :class="mainPart_filter_tab">
          <a-radio-group @change="getRadioVal" default-value="0" button-style="solid">
            <a-radio-button value="0">手术({{ SurgeryNum.num }})</a-radio-button>
            <a-radio-button value="1">图片({{ SurgeryNum.imageNum }})</a-radio-button>
            <a-radio-button value="2">视频({{ SurgeryNum.videoNum }})</a-radio-button>
            <a-radio-button value="3">语音({{ SurgeryNum.voiceNum }})</a-radio-button>
            <a-radio-button value="4">文件({{ SurgeryNum.fileNum }})</a-radio-button>
            <a-radio-button value="5">报告({{ SurgeryNum.reportNum }})</a-radio-button>
          </a-radio-group>
        </div>
      </div>
      <div class="mainPart_list">
        <div class="surgery" v-for="(item, index) in surgeryInfo" :key="index">
          <div class="surgery_er">
            <div
                class="surgery_er_one"
                @click="Details(item, showNum)"
                v-if="item.fileTypee != 'zip'"
            >
              <div v-if="!item.fileTypee" :class="surgery_er_one_img"></div>
              <img
                  v-if="
                  item.fileTypee == 'png' ||
                  item.fileTypee == 'jpg' ||
                  item.fileTypee == 'jpeg'
                "
                  :src="imgUrl + item.filePath"
                  alt
              />
              <div v-if="item.fileTypee == 'mp3'" :class="surgery_er_one_mp3"></div>
              <div v-if="item.fileTypee == 'xls'" :class="surgery_er_one_xls"></div>
              <div
                  v-if="item.fileTypee == 'docx' || item.fileTypee == 'doc'"
                  :class="surgery_er_one_doc"
              ></div>
              <div v-if="item.fileTypee == 'report'" :class="surgery_er_one_report"></div>
              <div v-if="item.fileTypee == 'pptx'" :class="surgery_er_one_pptx"></div>
              <div v-if="item.fileTypee == 'pdf'" :class="surgery_er_one_img"></div>
              <video
                  style="
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 10px 10px 0px 0px;
                  "
                  v-if="item.fileTypee == 'mp4'"
                  :src="imgUrl + item.filePath"
              ></video>
            </div>
            <div
                class="surgery_er_one"
                v-if="item.fileTypee == 'zip'"
                @click="onDownload(item.id)"
            >
              <img v-if="item.fileTypee == 'zip'" :src="reportImg" alt/>
            </div>
            <div class="surgery_er_two" v-if="showNum == 0 || showNum == ''">
              <div title="图片">
                <div class="surgery_icon surgery_icon1"></div>
                <span>{{ item.imageNum }}</span>
              </div>
              <div title="视频">
                <div class="surgery_icon surgery_icon2"></div>
                <span>{{ item.videoNum }}</span>
              </div>
              <div title="文档">
                <div class="surgery_icon surgery_icon3"></div>
                <span>{{ item.fileNum }}</span>
              </div>
              <div title="音频">
                <div class="surgery_icon surgery_icon4"></div>
                <span>{{ item.voiceNum }}</span>
              </div>
              <div title="报告">
                <div class="surgery_icon surgery_icon5"></div>
                <span>{{ item.reportNum }}</span>
              </div>
            </div>
          </div>
          <div class="surgery_san" v-if="item.fileTypee != 'zip' && showNum == 0" @click="Details(item, showNum)">
            <div class="surgery_san_one">
              <span>{{ item.patientName }}</span>
            </div>
            <div class="shu"></div>
            <div class="surgery_san_two">
              <div class="one">
                编号
                <span class="surgery_san_two_one">
                  {{
                    item.operationCode
                  }}
                </span>
                <span v-if="item.operationType == 1" class="surgery_san_two_two">E</span>
              </div>
              <div class="two">
                日期
                <span>{{ item.operationDate }}</span>
              </div>
            </div>
          </div>
          <div class="surgery_san" v-if="item.fileTypee == 'zip' && showNum == 0" @click="onDownload(item.id)">
            <div class="surgery_san_one">
              <span>{{ item.patientName }}</span>
            </div>
            <div class="shu"></div>
            <div class="surgery_san_two">
              <div class="one">
                编号
                <span class="surgery_san_two_one">
                  {{
                    item.operationCode
                  }}
                </span>
                <span v-if="item.operationType == 1" class="surgery_san_two_two">E</span>
              </div>
              <div class="two">
                日期
                <span>{{ item.operationDate }}</span>
              </div>
            </div>
          </div>
          <div class="surgery_san" v-if="item.fileTypee != 'zip' && showNum != 0" @click="Details(item, showNum)">
            <div class="surgery_san_one">
              <span>{{ item.patientName }}</span>
            </div>
            <div class="shu"></div>
            <div class="surgery_san_two">
              <div class="one">
                编号
                <span class="surgery_san_two_one">
                  {{
                    item.operationCode
                  }}
                </span>
                <span v-if="item.operationType == 1" class="surgery_san_two_two">E</span>
              </div>
              <div class="two">
                日期
                <span>{{ item.fileDate }}</span>
              </div>
            </div>
          </div>
          <div class="surgery_san" v-if="item.fileTypee == 'zip' && showNum != 0" @click="onDownload(item.id)">
            <div class="surgery_san_one">
              <span>{{ item.patientName }}</span>
            </div>
            <div class="shu"></div>
            <div class="surgery_san_two">
              <div class="one">
                编号
                <span class="surgery_san_two_one">
                  {{
                    item.operationCode
                  }}
                </span>
                <span v-if="item.operationType == 1" class="surgery_san_two_two">E</span>
              </div>
              <div class="two">
                日期
                <span>{{ item.fileDate }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="totalCount && totalCount !== 0" :class="mainPart_paging">
        <a-pagination @change="pagingChange" v-model="current" :total="totalCount" :defaultPageSize="8"/>
      </div>
    </div>

    <div class="showFile" ref="showFile">
      <a-modal
          class="Amodal AmodalFile"
          :visible="visible"
          :confirm-loading="confirmLoading"
          @ok="handleOk"
          @cancel="handleCancel"
          keyboard
          closable
          cancelText="取消"
          okText="确认"
          :mask="false"
          :maskClosable="false"
          :getContainer="() => $refs.showFile"
      >
        <div class="title">
          <div class="title_">
            <div class="one">
              <img src="../../../../images/home-details/icon-name.png" alt/>
            </div>
            <div class="two">
              <span>{{ showFile.patientName }}</span> -
              <span>{{ showFile.operationCode }}</span>
            </div>
          </div>
          <!-- <div class="title_delete">
            <a-button
              type="primary"
              v-if="showFile.fileType == 2"
              style="margin-right: 20px"
              @click="editing"
              >剪辑</a-button
            >
            <a-button type="danger" @click="onDelete(showFile.id)"
              >删除</a-button
            >
          </div>-->
        </div>
        <div class="content contentImg" v-if="showFile.fileType == 1">
          <div class="file_path">
            <a-icon class="title_fullScreen" type="fullscreen"/>
            <img class="contentImg_img" :src="imgUrl + showFile.filePath" preview="1" alt/>
          </div>
        </div>
        <div class="content contentVideo" v-if="showFile.fileType == 2">
          <div class="file_path">
            <video
                :preload="preload"
                align="center"
                width="900"
                :controls="controls"
                :autoplay="autoplay"
                v-if="videoViewShow"
                :src="imgUrl + showFile.filePath"
                type="video/mp4"
            ></video>
            <videoView
                class="editingVideo"
                :videoView="imgUrl + showFile.filePath"
                :fileId="showFile.id"
                v-if="videoViewShow1"
            ></videoView>
          </div>
        </div>
        <div class="content contentAudio" v-if="showFile.fileType == 3">
          <div class="file_path showAudio">
            <img src="../../../../images/home-details/audio.png" alt/>
            <audio :src="imgUrl + showFile.filePath" controls="controls"></audio>
          </div>
        </div>
        <div class="content contentfile" v-if="showFile.fileType == 4">
          <div class="file_path">
            <iframe
                v-if="showFile.fileTypee == 'pdf'"
                :src="imgUrl + showFile.filePath"
                width="1366px"
                height="650px"
            ></iframe>
            <div class="Loading" v-show="Loading1">
              <a-spin tip="Loading..."></a-spin>
            </div>
            <iframe
                id="fileIframe"
                v-if="showFile.fileTypee != 'pdf'"
                :src="imgUrl + showFile1.filePath"
                width="1366px"
                height="650px"
            ></iframe>
          </div>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import api from "../../../api/operation/operation.js";
import videoView from "./VideoView.vue";

function getDay(day) {
  let today = new Date();
  let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
  today.setTime(targetday_milliseconds); //注意，这行是关键代码
  let tYear = today.getFullYear();
  let tMonth = today.getMonth();
  let tDate = today.getDate();
  let tHours = today.getHours();
  let tMinutes = today.getMinutes();
  let tSeconds = today.getSeconds();
  tMonth = doHandleMonth(tMonth + 1);
  tDate = doHandleMonth(tDate);
  return (
      tYear +
      "-" +
      tMonth +
      "-" +
      tDate +
      " " +
      tHours +
      ":" +
      tMinutes +
      ":" +
      tSeconds
  );
}

function doHandleMonth(month) {
  let m = month;
  if (month.toString().length == 1) {
    m = "0" + month;
  }
  return m;
}

export default {
  inject: ["reload"],
  components: {
    videoView
  },
  data() {
    return {
      reportImg: require('../../../../images/home-showAll-otherFile/bg-report.png'),
      showDateTime: null,
      checkedListDisabled: null,
      Amenu: "",
      startTime: "",
      endTime: "",
      startTimeApply: "",
      endTimeApply: "",
      imgUrl: "",
      onSearchValue: '',
      surgeryInfo: {},
      SurgeryNum: {},
      centerInp: "",
      checkBoxObj: {
        checkedList: [],
        tempCheckedList: [],
        children: [
          {
            val: 1,
            label: "近1周"
          },
          {
            val: 2,
            label: "近1月"
          },
          {
            val: 3,
            label: "近3月"
          },
          {
            val: 4,
            label: "自定义"
          }
        ]
      },
      current: 1,
      totalCount: null,
      showNum: 0,
      Loading1: false,
      showFile: {},
      showFile1: {},
      showFileShow: false,
      visible: false,
      confirmLoading: false,
      videoViewShow: true,
      videoViewShow1: false,
      preload: "auto", //  建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
      controls: true, // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
      autoplay: "",
      pdfFile: "",
      menuLeft: "",
      menuLeft1: "",
      surgery_er_one_img: "surgery_er_one_img",
      surgery_er_one_mp3: "surgery_er_one_mp3",
      surgery_er_one_xls: "surgery_er_one_xls",
      surgery_er_one_doc: "surgery_er_one_doc",
      surgery_er_one_report: "surgery_er_one_report",
      surgery_er_one_pptx: "surgery_er_one_pptx",
      mainPart_filter_tab: "mainPart_filter_tab",
      mainPart_paging: "mainPart_paging"
    };
  },
  created() {
    this.imgUrl = this.$config.imgUrl;
    this.getSurgery();
    this.getSurgeryNum();
  },
  mounted() {
    let _this = this;
    let startDate = document.querySelectorAll(
        ".wholeShowAll .ant-calendar-picker-input.ant-input .ant-calendar-range-picker-input"
    );
    startDate[0].setAttribute("placeholder", "");
    startDate[1].setAttribute("placeholder", "");
    let Search = this.$router.currentRoute.query.data;
    this.centerInp = Search;
    this.onSearchValue = Search;
    if (Search != "") {
      this.getSurgery("", this.centerInp);
    }
    this.getSurgeryNum(this.onSearchValue)
    window.Event.$on("menuLeft", val => {
      _this.menuLeft = val;
      if (_this.menuLeft != "menuDeaDolour") {
        _this.surgery_er_one_img = "surgery_er_one_img";
        _this.surgery_er_one_mp3 = "surgery_er_one_mp3";
        _this.surgery_er_one_xls = "surgery_er_one_xls";
        _this.surgery_er_one_doc = "surgery_er_one_doc";
        _this.surgery_er_one_report = "surgery_er_one_report";
        _this.surgery_er_one_pptx = "surgery_er_one_pptx";
        _this.mainPart_filter_tab = "mainPart_filter_tab";
        _this.mainPart_paging = "mainPart_paging";
        _this.reportImg = require('../../../../images/home-showAll-otherFile/bg-report.png');
      } else if (_this.menuLeft == "menuDeaDolour") {
        _this.surgery_er_one_img = "surgery_er_one_img1";
        _this.surgery_er_one_mp3 = "surgery_er_one_mp31";
        _this.surgery_er_one_xls = "surgery_er_one_xls1";
        _this.surgery_er_one_doc = "surgery_er_one_doc1";
        _this.surgery_er_one_report = "surgery_er_one_report1";
        _this.surgery_er_one_pptx = "surgery_er_one_pptx1";
        _this.mainPart_filter_tab = "mainPart_filter_tab1";
        _this.mainPart_paging = "mainPart_paging1";
        _this.reportImg = require('../../../../images/home-showAll-otherFile/bg-report1.png');
      }
    });
    // _this.menuLeft1 = _this.$store.state.menuLeft
    _this.menuLeft1 = sessionStorage.getItem("menuLeft");
    if (_this.menuLeft1 != "menuDeaDolour") {
      _this.surgery_er_one_img = "surgery_er_one_img";
      _this.surgery_er_one_mp3 = "surgery_er_one_mp3";
      _this.surgery_er_one_xls = "surgery_er_one_xls";
      _this.surgery_er_one_doc = "surgery_er_one_doc";
      _this.surgery_er_one_report = "surgery_er_one_report";
      _this.surgery_er_one_pptx = "surgery_er_one_pptx";
      _this.mainPart_filter_tab = "mainPart_filter_tab";
      _this.mainPart_paging = "mainPart_paging";
      _this.reportImg = require('../../../../images/home-showAll-otherFile/bg-report.png');
    } else if (_this.menuLeft1 == "menuDeaDolour") {
      _this.surgery_er_one_img = "surgery_er_one_img1";
      _this.surgery_er_one_mp3 = "surgery_er_one_mp31";
      _this.surgery_er_one_xls = "surgery_er_one_xls1";
      _this.surgery_er_one_doc = "surgery_er_one_doc1";
      _this.surgery_er_one_report = "surgery_er_one_report1";
      _this.surgery_er_one_pptx = "surgery_er_one_pptx1";
      _this.mainPart_filter_tab = "mainPart_filter_tab1";
      _this.mainPart_paging = "mainPart_paging1";
      _this.reportImg = require('../../../../images/home-showAll-otherFile/bg-report1.png');
    }
  },
  methods: {
    // 下载
    onDownload(id) {
      api.operationFiledownload(null, id).then(res => {
        let getTime = new Date().getTime();
        getTime = moment(getTime).format("YYYYMMDDHHMMSS");
        let blob = new Blob([res], {
          type: "application/zip"
        });
        let objectUrl = URL.createObjectURL(blob);
        let a = document.createElement("a");
        a.href = objectUrl;
        a.download = getTime + ".zip";
        a.click();
      });
    },
    Details(data, showNum) {
      if (showNum == 0 || showNum == "") {
        this.$router.push({
          path: "/details",
          query: data
        });
      } else {
        this.visible = true;
        this.examine(data);
      }
    },
    pagingChange(page, pageSize) {
      this.current = page;
      this.getSurgery(this.showNum, this.onSearchValue, this.startTimeApply, this.endTimeApply, this.current);
    },
    onChange(dates, dateStrings) {
      this.showDateTime = dates;
      if (dates.length != 0) {
        this.startTime = this.$dataMethod.dateFormat("YY-mm-dd", dates[0]._d);
        this.endTime = this.$dataMethod.dateFormat("YY-mm-dd", dates[1]._d);
        this.getSurgery("", "", this.startTime, this.endTime);
      }
    },
    getRadioVal(e) {
      this.current = 1;
      this.showNum = e.target.value;
      this.getSurgery(e.target.value);
    },
    onSearch(value) {
      this.onSearchValue = value
      this.getSurgery(this.showNum, this.onSearchValue);
      this.getSurgeryNum(this.onSearchValue);
    },
    onChangeOption(checkedList) {
      // if (checkedList.length < 1) {
      //   // 实现必须有一个选中的效果
      //   this.checkBoxObj.checkedList = this.checkBoxObj.tempCheckedList; // 点击选中项不能取消选中
      //   return;
      // }
      let _this = this;
      checkedList = checkedList.slice(-1); // 实现单选效果
      _this.checkBoxObj.tempCheckedList = checkedList; // 缓存当前选中项，在取消选中时使用
      _this.checkBoxObj.checkedList = checkedList; // 更新选中
      _this.checkedListDisabled = _this.checkBoxObj.checkedList[0];
      if (_this.checkBoxObj.checkedList[0] == 1) {
        _this.showDateTime = null;
        _this.startTime = getDay(-7);
        _this.endTime = getDay(0);
        _this.startTimeApply = moment(_this.startTime).format("YYYY-MM-DD");
        _this.endTimeApply = moment(_this.endTime).format("YYYY-MM-DD");
        this.getSurgery(this.showNum, this.onSearchValue, _this.startTimeApply, _this.endTimeApply);
      } else if (_this.checkBoxObj.checkedList[0] == 2) {
        _this.showDateTime = null;
        _this.startTime = getDay(-30);
        _this.endTime = getDay(0);
        _this.startTimeApply = moment(_this.startTime).format("YYYY-MM-DD");
        _this.endTimeApply = moment(_this.endTime).format("YYYY-MM-DD");
        this.getSurgery(this.showNum, this.onSearchValue, _this.startTimeApply, _this.endTimeApply);
      } else if (_this.checkBoxObj.checkedList[0] == 3) {
        _this.showDateTime = null;
        _this.startTime = getDay(-90);
        _this.endTime = getDay(0);
        _this.startTimeApply = moment(_this.startTime).format("YYYY-MM-DD");
        _this.endTimeApply = moment(_this.endTime).format("YYYY-MM-DD");
        this.getSurgery(this.showNum, this.onSearchValue, _this.startTimeApply, _this.endTimeApply);
      }
    },

    getSurgery(RadioVal, inpValue, StartTime, EndTime, current) {
      let _this = this;
      api
          .operationGetList(null, {
            type: this.showNum,
            filter: this.onSearchValue,
            startTime: StartTime ? StartTime : null,
            endTime: EndTime ? EndTime : null,
            pageSize: 8,
            pageNum: current
          })
          .then(res => {
            if (res.code == 200) {
              _this.totalCount = res.data.totalCount;
              _this.surgeryInfo = res.data.data;
              _this.surgeryInfo.forEach(element => {
                element.fileTypee = null;
                if (element.filePath != null) {
                  let load = element.filePath;
                  let index = load.lastIndexOf(".");
                  let fileType1 = load.substring(index + 1, load.length);
                  element.fileTypee = fileType1;
                }
              });
              console.log(_this.surgeryInfo)
            }
          });
    },
    getSurgeryNum(e) {
      let _this = this;
      api.operationgetNum(null, e || '').then(res => {
        if (res.code == 200) {
          _this.SurgeryNum = res.data;
        }
      });
    },
    returnToPrevious() {
      this.$router.go(-1); //返回上一层
    },

    examine(item) {
      let _this = this;
      _this.Loading1 = true;
      _this.showFile = item;
      let load = item.filePath;
      let index = load.lastIndexOf(".");
      let fileType1 = load.substring(index + 1, load.length);
      let fileId = _this.showFile.id;
      _this.showFile.fileTypee = fileType1;
      if (_this.showFile.fileType == 4 && _this.showFile.fileTypee != "pdf") {
        api.previewFile(null, fileId).then(res => {
          if (res.code == 200) {
            _this.Loading1 = false;
            let showFile1 = {};
            showFile1.fileId = fileId;
            showFile1.filePath = res.data;
            _this.showFile1 = showFile1;
          }
        });
      }
      if (_this.showFile.fileType == 4 && _this.showFile.fileTypee == "pdf") {
        _this.Loading1 = false;
      }
      _this.visible = true;
    },
    handleOk(e) {
      this.confirmLoading = true;
      this.visible = false;
      this.confirmLoading = false;
      this.getSurgery(this.showNum);
    },
    handleCancel(e) {
      this.visible = false;
      let fileId = this.showFile1.fileId;
      api.removePreview(null, fileId).then(res => {
        this.showFile1 = {};
      });
      this.getSurgery(this.showNum);
    },
    // 视频剪辑
    editing() {
      this.videoViewShow = false;
      this.videoViewShow1 = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.wholeShowAll {
  .crumbs {
    width: 1560px;
    display: flex;
    margin-left: 30px;
    margin-top: 14px;
    align-items: center;
    justify-content: space-between;

    a,
    area,
    button,
    [role="button"],
    input:not([type="range"]),
    label,
    select,
    summary,
    textarea,
    .ant-breadcrumb {
      font-family: MicrosoftYaHei;
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #4d4d4d;
    }

    .ant-breadcrumb > span:last-child a {
      font-family: MicrosoftYaHei;
      font-size: 18px;
      font-weight: normal;
      letter-spacing: 0px;
      color: #1e7eff;
    }

    .returnPrevious {
      margin-right: 10px;
      color: #0078b6;
      width: 60px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 18px;
      cursor: pointer;

      span {
        line-height: 20px;
      }
    }

    .returnPrevious:hover {
      color: #3fbfff;
    }
  }

  .Loading {
    position: absolute;
    background: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mainPart {
    width: 84%;
    margin-top: 17px;

    .mainPart_filter {
      width: 1560px;
      height: 36px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-left: 30px;
      // padding-left: 31px;
      .mainPart_filter_searchBox {
        width: 240px;
        height: 36px;
        border-radius: 18px;
        border: solid 1px #9d9d9d;
        min-height: 36px;
        position: relative;

        .centerInp {
          position: absolute;
          left: 0;
          width: 93%;
          border: none;
          border-style: none;
          background: none;
          box-shadow: none;
          border-radius: 18px;
          padding-left: 21px;
        }

        .centerBut {
          width: 18px;
          height: 18px;
          position: absolute;
          right: 19px;
          top: 8px;
          background-image: url(../../../../images/home/icon-search.png);
          background-size: cover;
          background-size: 100% 100%;
        }
      }

      .mainPart_filter_tab {
        .ant-radio-group {
          height: 36px;
          border-radius: 10px;
          border: solid 1px #0078b6;

          .ant-radio-button-wrapper {
            background: none;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #0078b6;
            height: 100%;
            border-top: 0;
            border-bottom: 0;
            border: 0;
          }
        }
      }

      .mainPart_filter_tab1 {
        .ant-radio-group {
          height: 36px;
          border-radius: 10px;
          border: solid 1px #2091bb;

          .ant-radio-button-wrapper {
            background: none;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #2091bb;
            height: 100%;
            border-top: 0;
            border-bottom: 0;
            border: 0;
          }
        }
      }

      .mainPart_filter_time {
        width: 300px;
        display: flex;
        position: relative;

        .ant-calendar-picker-input.ant-input {
          width: 260px !important;
        }

        .one {
          width: 14px;
          height: 16px;
          background-image: url(../../../../images/home-showAll/icon-date.png);
          background-size: cover !important;
          background-size: 100% 100% !important;
          position: absolute;
          left: 40%;
          top: 25%;
        }

        .two {
          width: 14px;
          height: 16px;
          background-image: url(../../../../images/home-showAll/icon-date.png);
          background-size: cover !important;
          background-size: 100% 100% !important;
          position: absolute;
          right: 6%;
          top: 25%;
        }

        .startTimeApply {
          position: absolute;
          top: 20%;
          left: 13%;
          color: rgb(128, 128, 128);
        }

        .endTimeApply {
          position: absolute;
          top: 20%;
          right: 12%;
          color: rgb(128, 128, 128);
        }
      }
    }

    .mainPart_list {
      margin-top: 20px;
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .surgery {
        width: 367px;
        height: 400px;
        border-radius: 10px;
        margin-left: 31px;
        margin-bottom: 31px;
        cursor: pointer;
        position: relative;

        .surgery_er {
          width: 367px;
          height: 340px;
          border-radius: 10px 10px 0px 0px;
          position: relative;

          .surgery_er_one {
            width: 100%;
            height: 100%;
            border-radius: 10px 10px 0px 0px;
            overflow-x: hidden;
            display: flex;
            justify-content: center;

            img {
              height: 100%;
              // width: 100%;
              // height: 100%;
            }

            .surgery_er_one_img {
              border-radius: 10px 10px 0px 0px;
              width: 100%;
              height: 100%;
              background-image: url(../../../../images/home-showAll/bg-imgError.png);
              background-size: cover;
              background-size: 100% 100%;
            }

            .surgery_er_one_img1 {
              border-radius: 10px 10px 0px 0px;
              width: 100%;
              height: 100%;
              background-image: url(../../../../images/home-showAll/bg-imgError1.png);
              background-size: cover;
              background-size: 100% 100%;
            }

            .surgery_er_one_mp3 {
              border-radius: 10px 10px 0px 0px;
              width: 100%;
              height: 100%;
              background-image: url(../../../../images/home-showAll-otherFile/bg-audio-file.png);
              background-size: cover;
              background-size: 100% 100%;
            }

            .surgery_er_one_mp31 {
              border-radius: 10px 10px 0px 0px;
              width: 100%;
              height: 100%;
              background-image: url(../../../../images/home-showAll-otherFile/bg-audio-file1.png);
              background-size: cover;
              background-size: 100% 100%;
            }

            .surgery_er_one_xls {
              border-radius: 10px 10px 0px 0px;
              width: 100%;
              height: 100%;
              background-image: url(../../../../images/home-showAll-otherFile/bg-Excel-File.png);
              background-size: cover;
              background-size: 100% 100%;
            }

            .surgery_er_one_xls1 {
              border-radius: 10px 10px 0px 0px;
              width: 100%;
              height: 100%;
              background-image: url(../../../../images/home-showAll-otherFile/bg-Excel-File1.png);
              background-size: cover;
              background-size: 100% 100%;
            }

            .surgery_er_one_doc {
              border-radius: 10px 10px 0px 0px;
              width: 100%;
              height: 100%;
              background-image: url(../../../../images/home-showAll-otherFile/bg-word-file.png);
              background-size: cover;
              background-size: 100% 100%;
            }

            .surgery_er_one_doc1 {
              border-radius: 10px 10px 0px 0px;
              width: 100%;
              height: 100%;
              background-image: url(../../../../images/home-showAll-otherFile/bg-word-file1.png);
              background-size: cover;
              background-size: 100% 100%;
            }

            .surgery_er_one_report {
              border-radius: 10px 10px 0px 0px;
              width: 100%;
              height: 100%;
              background-image: url(../../../../images/home-showAll-otherFile/bg-report.png);
              background-size: cover;
              background-size: 100% 100%;
            }

            .surgery_er_one_report1 {
              border-radius: 10px 10px 0px 0px;
              width: 100%;
              height: 100%;
              background-image: url(../../../../images/home-showAll-otherFile/bg-report1.png);
              background-size: cover;
              background-size: 100% 100%;
            }

            .surgery_er_one_pptx {
              border-radius: 10px 10px 0px 0px;
              width: 100%;
              height: 100%;
              background-image: url(../../../../images/home-showAll-otherFile/bg-ppt-File.png);
              background-size: cover;
              background-size: 100% 100%;
            }

            .surgery_er_one_pptx1 {
              border-radius: 10px 10px 0px 0px;
              width: 100%;
              height: 100%;
              background-image: url(../../../../images/home-showAll-otherFile/bg-ppt-File1.png);
              background-size: cover;
              background-size: 100% 100%;
            }
          }

          .surgery_er_two {
            position: absolute;
            display: flex;
            justify-content: space-around;
            align-items: center;
            top: 0;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            color: #ffffff;
            width: 100%;
            height: 30px;
            background-color: #343f4b;
            border-radius: 10px 10px 0px 0px;
            opacity: 0.7;

            div {
              display: flex;
              align-items: center;

              .surgery_icon {
                width: 24px;
                height: 20px;
              }

              .surgery_icon1 {
                background-image: url(../../../../images/home/icon-image.png);
                background-size: cover;
                background-size: 100% 100%;
              }

              .surgery_icon2 {
                background-image: url(../../../../images/home/icon-video.png);
                background-size: cover;
                background-size: 100% 100%;
              }

              .surgery_icon3 {
                background-image: url(../../../../images/home/icon-file.png);
                background-size: cover;
                background-size: 100% 100%;
              }

              .surgery_icon4 {
                background-image: url(../../../../images/home/icon-audio.png);
                background-size: cover;
                background-size: 100% 100%;
              }

              .surgery_icon5 {
                background-image: url(../../../../images/home/icon-report.png);
                background-size: cover;
                background-size: 100% 100%;
              }

              span {
                margin-left: 10px;
              }
            }
          }
        }

        .surgery_san {
          position: absolute;
          bottom: 0;
          display: flex;
          align-items: center;
          width: 100%;
          height: 60px;
          background-color: #fff;
          border-radius: 0px 0px 10px 10px;

          .surgery_san_one {
            width: 126px;
            height: 60px;
            font-family: MicrosoftYaHei-Bold;
            font-size: 20px;
            font-weight: normal;
            font-stretch: normal;
            color: #494949;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .surgery_san_two {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            width: 237px;
            height: 60px;
            font-family: MicrosoftYaHei;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            color: #494949;

            .one {
              margin-left: 14px;
              color: #747474;
              position: relative;

              .surgery_san_two_one {
                margin-left: 10px;
                color: #494949;
              }

              .surgery_san_two_two {
                font-size: 20px;
                font-weight: bold;
                color: #ff0000;
                position: absolute;
                bottom: -2px;
                right: -30px;
              }
            }

            .two {
              margin-left: 15px;
              color: #747474;

              span {
                margin-left: 10px;
                color: #494949;
              }
            }
          }

          .shu {
            width: 4px;
            height: 32px;
            border-right: solid 1px #b2b2b2;
          }
        }
      }

      .surgery:hover {
        box-shadow: 0px 0px 20px 0px rgba(0, 120, 182, 0.6);
      }
    }

    .mainPart_paging,
    .mainPart_paging1 {
      width: 100%;
      padding-bottom: 30px;
    }
  }

  .content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .content_div {
      margin-top: 19px;
      display: flex;
      position: relative;
      flex-wrap: wrap;

      .top {
        position: absolute;
        display: flex;
        align-items: center;

        img {
          width: 24px;
          height: 20px;
        }

        span {
          display: flex;
          width: 100px;
          font-size: 18px;
          color: #0f3d54;
          margin-left: 13px;
        }
      }

      .bottom {
        margin-right: 19px;
        margin-top: 29px;

        .bottom_con {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 176px;
          height: 206px;
          position: relative;

          .shadow {
            position: absolute;
            top: 7px;
            width: 162px;
            height: 30px;
            background-color: #343f4b;
            opacity: 0.7;
            display: flex;
            align-items: center;
            justify-content: center;

            .two {
              margin: 0 20px;
            }

            .one,
            .two,
            .three {
              cursor: pointer;
              width: 18px;
              height: 18px;
              display: flex;

              img {
                width: 18px;
                height: 18px;
              }
            }
          }

          .shadow1 {
            .one {
              margin-right: 22px;
            }
          }

          .img {
            margin-top: 7px;
            width: 164px;
            height: 164px;
            background-color: #0078b6;
            border: solid 1px #0078b6;

            img {
              width: 100%;
              height: 100%;
            }

            video {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .time {
            margin-top: 12px;
            width: 164px;
            height: 16px;
            font-size: 14px;
            color: #333333;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
          }
        }

        .fileBack {
          width: 176px;
          height: 206px;

          .img {
            width: 90px;
            height: 112px;

            img {
              width: 90px;
              height: 112px;
            }
          }

          .fileName {
            display: flex;
            margin-top: 6px;
          }
        }
      }

      .bottom_con:hover {
        background-color: rgba(0, 120, 182, 0.2);
        border-radius: 4px;
        border: solid 1px #0078b6;
      }
    }
  }

  .editingVideo {
    width: 100%;
  }

  .showFile {
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;

      .title_ {
        display: flex;
        align-items: center;
        height: 30px;

        .one {
          margin-right: 20px;
          margin-left: 10px;
        }
      }

      .title_delete {
        margin-right: 60px;
        display: flex;
        align-items: center;
      }
    }

    .content {
      border-top: 1px solid #e8e8e8;
      width: 100%;
      padding: 10px 10px 0 10px;

      .file_path {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        .title_fullScreen {
          font-size: 20px;
          position: absolute;
          right: 0;
          bottom: 0;
          color: #ddd;
        }

        img {
          width: 800px;
          height: 450px;
          cursor: pointer;
        }
      }

      .showAudio {
        margin: 0 auto;
        width: 450px;
        height: 450px;
        background-color: #f1f3f4;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;

        img {
          width: 200px;
          height: 200px;
        }
      }
    }
  }
}
</style>
<style>
.wholeShowAll .mainPart_filter_time .ant-calendar-picker-input {
  border: none !important;
  background: none !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
}

.wholeShowAll .mainPart_filter_time .ant-calendar-range-picker-input {
  height: 34px !important;
  line-height: 34px !important;
  border-bottom: solid 1px #9d9d9d !important;
}

.wholeShowAll .mainPart_filter_time .ant-calendar-picker-clear,
.wholeShowAll .ant-calendar-picker-icon {
  background-color: none !important;
  position: absolute !important;
  left: 50% !important;
  width: 6px !important;
  height: 1px !important;
  background: #000 !important;
  transform: translate(-3px) !important;
  top: 70% !important;
}

.wholeShowAll .mainPart_filter_time .ant-calendar-range-picker-separator {
  color: rgba(255, 255, 255, 0) !important;
}

.wholeShowAll
.mainPart_filter_time
.anticon.anticon-close-circle.ant-calendar-picker-clear {
  position: absolute !important;
  left: 96% !important;
  top: 50% !important;
  border: none !important;
  background: none !important;
}

.wholeShowAll
.mainPart_filter_tab
.ant-radio-group-solid
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  background-color: #0078b6 !important;
  color: #fff !important;
  border: 0 !important;
}

.wholeShowAll
.mainPart_filter_tab
.ant-radio-button-wrapper:not(:first-child)::before {
  background-color: #0078b6 !important;
}

.wholeShowAll
.mainPart_filter_tab1
.ant-radio-group-solid
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  background-color: #2091bb !important;
  color: #fff !important;
  border: 0 !important;
}

.wholeShowAll
.mainPart_filter_tab1
.ant-radio-button-wrapper:not(:first-child)::before {
  background-color: #2091bb !important;
}

.wholeShowAll
.ant-radio-group-solid
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):nth-child(1) {
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
}

.wholeShowAll
.ant-radio-group-solid
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):nth-child(6) {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

.wholeShowAll .ant-dropdown {
  width: 90px !important;
  height: 120px !important;
  background-color: #ffffff !important;
  border-radius: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.wholeShowAll .ant-dropdown-menu-item > a,
.ant-dropdown-menu-submenu-title > a {
  width: 90px !important;
  height: 40px !important;
  font-family: MicrosoftYaHei !important;
  font-size: 16px !important;
  font-weight: normal !important;
  font-stretch: normal !important;
  letter-spacing: 0px !important;
  color: #333333 !important;
}

.wholeShowAll
.mainPart
.mainPart_filter
.mainPart_filter_dropdown
.a_dropdown[data-v-7bdf03d1] {
  height: 36px !important;
}

.wholeShowAll .ant-dropdown-menu-item:hover,
.wholeShowAll .ant-dropdown-menu-submenu-title:hover {
  background-color: #707070 !important;
}

.wholeShowAll .mainPart_paging .ant-pagination-prev .ant-pagination-item-link {
  border: none !important;
  background: none !important;
  background-image: url(../../../../images/home-showAll/pagin-left-initial.png) !important;
  background-size: cover !important;
  background-size: 100% 100% !important;
}

.wholeShowAll .mainPart_paging1 .ant-pagination-prev .ant-pagination-item-link {
  border: none !important;
  background: none !important;
  background-image: url(../../../../images/home-showAll/pagin-left-initial1.png) !important;
  background-size: cover !important;
  background-size: 100% 100% !important;
}

.wholeShowAll
.mainPart_paging
.ant-pagination-prev
.ant-pagination-item-link:hover {
  background-image: url(../../../../images/home-showAll/pagin-left-XF.png) !important;
  background-size: cover !important;
  background-size: 100% 100% !important;
}

.wholeShowAll
.mainPart_paging1
.ant-pagination-prev
.ant-pagination-item-link:hover {
  background-image: url(../../../../images/home-showAll/pagin-left-XF1.png) !important;
  background-size: cover !important;
  background-size: 100% 100% !important;
}

.wholeShowAll .mainPart_paging .ant-pagination-next .ant-pagination-item-link {
  border: none !important;
  background: none !important;
  background-image: url(../../../../images/home-showAll/pagin-right-initial.png) !important;
  background-size: cover !important;
  background-size: 100% 100% !important;
}

.wholeShowAll .mainPart_paging1 .ant-pagination-next .ant-pagination-item-link {
  border: none !important;
  background: none !important;
  background-image: url(../../../../images/home-showAll/pagin-right-initial1.png) !important;
  background-size: cover !important;
  background-size: 100% 100% !important;
}

.wholeShowAll
.mainPart_paging
.ant-pagination-next
.ant-pagination-item-link:hover {
  background-image: url(../../../../images/home-showAll/pagin-right-XF.png) !important;
  background-size: cover !important;
  background-size: 100% 100% !important;
}

.wholeShowAll
.mainPart_paging1
.ant-pagination-next
.ant-pagination-item-link:hover {
  background-image: url(../../../../images/home-showAll/pagin-right-XF1.png) !important;
  background-size: cover !important;
  background-size: 100% 100% !important;
}

.wholeShowAll .ant-pagination-item,
.wholeShowAll .ant-pagination-item a {
  background-color: none !important;
  border-radius: 50% !important;
  border: none !important;
}

.wholeShowAll .ant-pagination-item {
  background: none !important;
}

.wholeShowAll .ant-pagination-item a {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  color: #5d77ad !important;
}

.wholeShowAll .mainPart_paging .ant-pagination-item-active,
.wholeShowAll .mainPart_paging .ant-pagination-item-active a {
  background-color: #5d77ad !important;
  color: #fff !important;
}

.wholeShowAll .mainPart_paging1 .ant-pagination-item-active,
.wholeShowAll .mainPart_paging1 .ant-pagination-item-active a {
  background-color: #2091bd !important;
  color: #fff !important;
}

.wholeShowAll .mainPart_paging .anticon,
.wholeShowAll .mainPart_paging1 .anticon {
  display: none !important;
}

.wholeShowAll .ant-modal-footer {
  border-top: 0;
}

.wholeShowAll .ant-modal-footer .ant-btn.ant-btn-primary {
  width: 94px !important;
  height: 30px !important;
  border-radius: 30px !important;
  background-color: #0078b5 !important;
  font-size: 16px !important;
  color: #fff !important;
  margin-left: 40px !important;
}

.wholeShowAll .ant-modal-footer .ant-btn {
  width: 94px !important;
  height: 30px !important;
  border-radius: 30px !important;
  font-size: 16px !important;
  color: #0376b7 !important;
  border: 1px solid #0376b7 !important;
  display: none !important;
}
</style>